<template>
  <div class="pagestyle">
    <list_controller :style="{ width: state.listBtnType == 6 ? '78%' : '100%' }" ref="zujianname"
      :options="state.optionsList" :showCaozuo="true">
      <template v-slot:selectNamelist>
        <div>
          断电与馈电
          <span style="font-weight: 500;font-size: 14px;margin:0 10px;">分站</span>
          <el-select @change="stationCodeChange" clearable filterable v-model="state.stationCode" placeholder="请选择">
            <el-option v-for="item in state.stationmodelList" :key="item.value" :label="item.value+'-'+item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </template>
    </list_controller>
  </div>
</template>
<script setup>
  import list_controller from "@/components/commonCom/list_controller";
  import {
    computed,
    reactive
  } from "vue";
  import {
    table_headers
  } from "@/components/commonCom/table_headers";
  import axios from "@/utils/request";
  import {
    getlistSitesList
  } from '@/api/config'
  const {
    proxy
  } = getCurrentInstance();
  let state = reactive({
    stationCode:'',
    tabNameData: "模拟量",
    detailsShow: false,
    detailsList: [],
    fillayaComShow: false, //控制填写分析抽屉显示
    listBtnType: undefined,
    optionsList: {},
    options: {
      refreshShow: true,
      tableheads: computed(() => table_headers.cutPointInfo),
      flag: "A",
      queryList: {
        querys: [],
      },
      dataUrl: "/hisPointCut/gainCutPointInfo",
    },
    // 表单
    editId: undefined,
    drawerShow: false,
    pointDataList: [],
    targetTime: '',
    conditionsensorName: 'A',
    searchTreeList: [],
    shaixuanObj: {
      condition: "A",
      flag: "B",
      isPower: false
    },
    stationmodelList: []

  });
  // 填写分析抽屉
  function getlistPointName() {
    axios
      .post("/hisPointFeed/listPointName", {
        condition: state.conditionsensorName,
      })
      .then((res) => {
        state.searchTreeList = res.data;
      });
  }
  getlistPointName()

  state.optionsList = state.options;

  function getSelList() {
    getlistSitesList().then(res => {
      state.stationmodelList = Object.keys(res.data).map(item => {
        return {
          label: res.data[item],
          value: item
        }
      })
    })
  }
  getSelList()
  function stationCodeChange(val){
    proxy.$refs['zujianname'].getData({stationCode:state.stationCode})
    
  }

</script>
<style lang="scss" scoped>
  :deep(.vxe-table--filter-footer) {
    display: none !important;

  }

  .xiazai {
    position: absolute;
    top: 42px;
    right: 241px;
    width: 120px;
    height: 64px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    background-color: #ffff;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    z-index: 99;

    .item {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .item:hover {
      background-color: #ececec;
    }
  }

  .pagestyle {
    display: flex;
    justify-content: space-between;
  }
</style>